<template>
  <div class="container">
    <view class="good" @click="change(1)">
      <uni-icons type="hand-up-filled" :size="size" v-if="props.modelValue === 1" />
      <uni-icons type="hand-up" :size="size" v-else />
      <span>{{ good }}</span>
    </view>
    <view class="bad" :style="{ marginLeft: distance }" @click="change(0)">
      <uni-icons type="hand-down-filled" :size="size" v-if="props.modelValue === 0" />
      <uni-icons type="hand-down" :size="size" v-else />
      <span>{{ bad }}</span>
    </view>
  </div>
</template>

<script setup lang="ts">
import StyleSizeOperation from '@/utils/StyleSizeOperation'
import { computed } from 'vue'
const props = defineProps({
  modelValue: {
    type: Number,
    default: undefined
  },
  size: {
    type: String,
    default: '20px'
  },
  /**
   * 间隔大小
   */
  distance: {
    type: String,
    default: '25rpx'
  },
  good: {
    type: String,
    default: '赞'
  },
  bad: {
    type: String,
    default: '踩'
  }
})
const emits = defineEmits<{
  (e: 'update:modelValue', newVal: number | undefined): void
}>()
function change(value: number) {
  console.log('change', value)
  emits('update:modelValue', props.modelValue === value ? undefined : value)
}

// style vars
const fontSize = computed(() => StyleSizeOperation.calculateScaledSize(props.size, 0.6))
</script>

<style scoped lang="scss">
.container {
  height: 100%;

  .good,
  .bad {
    display: inline-flex;
    align-items: center;
    height: 100%;
    font-size: v-bind(fontSize);
  }
}
</style>
